<!--  -->
<template>
<div class="category">
<nav-bar class="title">
    <div slot="center" >商品分类</div>
</nav-bar>

<div class="categoryBody">
    <CategoryBar :category="category" @showContent="showContent" class="menu"/>

</div>
<div class="content">
    <CategoryItem v-for="(item,index) in subcategory_item" :key="index" :subcategory="item" class="subcategory_item"></CategoryItem>
    <TabControl :titles="['综合','新品','销量']" @tabclick="tabclick"/>
    <goods-list/>
</div>



</div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl"
import GoodsList from "components/content/goods/GoodsList"

import CategoryBar from "./childComps/CategoryBar"
import CategoryItem from "./childComps/CategoryItem"

import {getCategory,getSubcategory} from "network/category"
export default {
    components:{
        CategoryBar,
        NavBar,
        CategoryItem,
        TabControl,
        GoodsList,
    
    },
    data(){
        return{
            category:null,
            subcategory:null,
            subcategory_item:null
            
            
        }
    
    },
     async created(){
       const res = await getCategory()
        this.category = res.data.category.list
        getSubcategory(3627).then(res=>{
            this.subcategory=res
            this.subcategory_item=this.subcategory.data.list
            
        })
    },

    methods:{
       showContent(index){
            getSubcategory(this.category[index].maitKey).then(res=>{
                this.subcategory=res
                this.subcategory_item=this.subcategory.data.list
                
            })
            
        },
        tabclick(index){
            console.log(index);
            
        }
    }
}

</script>
<style scoped>
.category{
    position: relative;
   
}
.title{
    background-color:  var(--color-tint);
    color: #fff;

}
.categoryBody{
    display: flex;
}
.content{
    width: 235px;
    position: absolute;
    top:50px;
    right:0;
    margin-top:10px;
height: 2000px;
}
.subcategory_item{
    display: inline-block;
width:30%;
margin:2px;
text-align: center;
height: 90px;
font-size: 14px;
}
</style>